Thanks for the discussion @CGuindon & @dancormier! I tweaked the Bling component as we discussed based on the designs:

• Bling component unfilled small size will be 8x8px. With the icon size 6x6px, except silver and gold which will be 7x7px
• Bling component unfilled large and regular sizes will be 10x10px. With the icon size as 8x8px, except silver and gold which will be 9x9px.

I also added more size examples to Stacks Docs now: https://deploy-preview-2051--stacks.netlify.app/product/components/badges/#badge-sizes

Note: I find testing the different variants easier from the Svelte component side.

(not fully related) I noticed if you inspect the example of s-bling (link) it has some extra broken code class in there that's not doing anything. We can delete the s-bling__

@mukunku @dancormier Should we expose the Svelte component to consumers as part of this update?

If we are showing it in storybook we probably should exposing it in the index.ts as well I think.

Hey @dancormier , can you kindly take a look at the PR again when you get the chance?

As discussed I made the following changes:

• Reverted your commits 🙃 (Happy to help with those changes as a follow-up 🙏🏼 )
• Fixed font-weight issue for rep badges (thanks for catching).
• Switched line-height from 126% to var(--lh-md) which is 128% it seems.
• Adjusted Badge Size examples section:
  

I also exposed the Badge Svelte component in index.ts as mentioned by Giamir.